<template>
  <div class="devList">
    <div class="devList-box">
      <div class="devList-one">
        <t-row>
          <t-col :span="2">
            <div></div>
          </t-col>
          <t-col :span="10">
            <div class="devlist-one-button">
              <t-button theme="default" variant="base">基本信息</t-button>
              <t-button theme="default" variant="base">设备参数</t-button>
              <t-button theme="default" variant="base">设备状态</t-button>
              <t-button theme="default" variant="base">设备履历</t-button>
              <t-button theme="default" variant="base">运行手册</t-button>
              <t-button theme="default" variant="base">设备清单</t-button>
              <t-button theme="default" variant="base">系统资料</t-button>
            </div>
          </t-col>
        </t-row>
      </div>
      <div class="devList-two">
        <t-row :gutter="10">
          <t-col :span="2">
            <div class="devList-two-tree">
              <t-tree :data="items" activable hover transition>
                <!--                <template #operations="{ node }">-->
                <!--                  <div class="tdesign-demo-block-row">-->
                <!--                    <t-button size="small" variant="base" @click="() => {}">+</t-button>-->
                <!--                  </div>-->
                <!--                </template>-->
              </t-tree>
            </div>
          </t-col>
          <t-col :span="10">
            <div class="devList-two-right">
              <div class="devList-two-right-one">
                <t-button size="extra-small" theme="default" variant="base">
                  <template #icon><cloud-upload-icon /></template>
                  从模板导入
                </t-button>

                <t-button size="extra-small" theme="default" variant="base">
                  <template #icon><cloud-download-icon /></template>
                  导出为模板
                </t-button>
                <t-button size="extra-small" theme="default" variant="base">
                  <template #icon><upload1-icon /></template>
                  上传
                </t-button>
                <t-button size="extra-small" theme="default" variant="base">
                  <template #icon><arrow-down-rectangle-icon /></template>
                  下载
                </t-button>
              </div>
              <div class="devList-two-right-two">
                <t-table
                  :data="renderData"
                  :columns="columns"
                  row-key="id"
                  :hover="true"
                  :pagination="pagination"
                  :loading="loading"
                  :header-affixed-top="headerAffixedTop"
                  table-layout="auto"
                  size="small"
                  :selected-row-keys="selectedRowKeys"
                  @page-change="pageChange"
                >
                  <template #runState="{ row }">
                    <div
                      style="
                        padding: 6px 18px;
                        border-radius: 40px;
                        background-color: #07aa77ff;
                        text-align: center;
                        display: inline-block;
                        font-size: 12px;
                      "
                    >
                      {{ Number(row.runState) === 1 ? '正常' : '--' }}
                    </div>
                  </template>
                  <template #operations="{ row }">
                    <t-button
                      v-permission="authority.SYS_ROLE_EDIT"
                      variant="text"
                      size="small"
                      theme="primary"
                      @click="edit(row)"
                    >
                      <template #icon>
                        <edit2-icon />
                      </template>
                    </t-button>
                  </template>
                </t-table>
              </div>
            </div>
          </t-col>
        </t-row>
      </div>
    </div>

    <div>
      <device-flow-chart></device-flow-chart>
    </div>
  </div>
</template>
<script setup lang="tsx">
import {
  ArrowDownRectangleIcon,
  CloudDownloadIcon,
  CloudUploadIcon,
  Edit2Icon,
  Upload1Icon,
} from 'tdesign-icons-vue-next';
import { computed, ref } from 'vue';
import { usePagination } from 'vue-request';

import { getRolePage } from '@/api/upms/role';
import { prefix } from '@/config/global';
import { useSettingStore } from '@/store';
import authority from '@/utils/authority';
import defaultPageOptions from '@/utils/pagination';

// 开发静态数据
import { apiDataListArr, apiDateTreeArr } from './apiDate/apiDate';
// import DeviceFlowChart from './components/deviceFlowChart/index.vue';
import DeviceFlowChart from './components/antvx6Chart/Antvx6Chart.vue';

// -----------列表相关--------------
const selectedRowKeys = ref([3]);
let columns = [
  // { title: 'ID', colKey: 'id' },
  { colKey: 'row-select', type: 'multiple', width: 30 },
  { title: '中文名称', colKey: 'zName' },
  { title: '英文名称', colKey: 'eName' },
  { title: '所属系统', colKey: 'sys' },
  { title: '系统（设备）分级', colKey: 'sysType' },
  { title: '投产日期', colKey: 'date' },
  { title: '运行状态', colKey: 'runState' },
  { title: '所属部门', colKey: 'org' },
  { title: '操作', colKey: 'operations' },
];
const store = useSettingStore();
const headerAffixedTop = computed(
  () =>
    ({
      offsetTop: store.isUseTabsRouter ? 48 : 0,
      container: `.${prefix}-layout`,
    }) as any, // TO BE FIXED
);
columns = columns.map((a) => ({ ...a, align: 'center' }));
const renderData = apiDataListArr.map((a, ai) => ({ ...a, id: ai }));

// -----------列表相关--------------end

const { loading, current, pageSize, total } = usePagination(getRolePage, { ...defaultPageOptions });

// ---------数结构相关---------
const items = ref(apiDateTreeArr);
// ---------数结构相关---------end

// -----------分页相关------------
const pagination = computed(() => ({
  current: current.value,
  pageSize: pageSize.value,
  showTotal: true,
  showPageSize: true,
  total: total.value,
}));
const pageChange = (curr: any) => {
  if (pageSize.value !== curr.pageSize) {
    pageSize.value = curr.pageSize;
  }
  if (current.value !== curr.current) {
    current.value = curr.current;
  }
};
// -----------分页相关------------end

// --------弹出框相关-----------
const formDialogVisible = ref(false);
const formData = ref();
const edit = (e: any) => {
  formDialogVisible.value = true;
  formData.value = { ...e };
};
// --------弹出框相关-----------end
</script>

<style lang="less" scoped>
.devList {
  .devList-box {
    .devList-one {
      margin: 0 0 10px 0;
      .devList-one-button {
        //button {
        //  border: none;
        //  width: 179.4px;
        //  height: 36px;
        //  place-content: center;
        //  place-items: center;
        //  gap: 10px;
        //  flex-shrink: 0;
        //  padding: 10px;
        //  border-radius: 4px;
        //  background: #eeeeee1f;
        //  backdrop-filter: blur(100px);
        //  color: #bccce1ff;
        //  margin: 0 2px;
        //}
        //button:hover {
        //  border-radius: 4px;
        //  //border: 1px solid #cfe5ff38;
        //  box-sizing: border-box;
        //  background: linear-gradient(180deg, #7688a0ff 0%, #444f61ff 100%);
        //  backdrop-filter: blur(4px);
        //  color: #ffffffff;
        //}
      }
    }
    .devList-two {
      .devList-two-tree {
        padding: 10px;
        background: #eeeeee0d;

        :deep(.t-is-active .t-tree__label) {
          background: linear-gradient(96.78deg, #24afffe6 2.79%, #005ce2e6 128.11%);
        }
        :deep(.t-tree--hoverable .t-tree__label:not(.t-is-active):not(.t-is-checked):hover) {
          background: linear-gradient(96.78deg, #24afffe6 2.79%, #005ce2e6 128.11%);
        }
      }
      .devList-two-right {
        padding: 10px;
        background: #eeeeee1f;
        backdrop-filter: blur(100px);

        .devList-two-right-one {
          margin: 0 0 10px 0;
        }
        .devList-two-right-two {
        }
      }
    }
  }
}
</style>
